<template>
  <div class="app-container personal-left">
    <span class="my-head">
      <img :src="url+$store.state.userInfo.userPortrait" alt="">
    </span>
    <span class="my-name">
      {{userInfo.userName}}
      <router-link to="/myset"><img src="/static/images/personal/edit.png" alt=""></router-link>
    </span>
    <span class="my-name" @click="loginOut">
      <img src="/static/images/personal/exit.png" alt="">
      退出登录
    </span>
    <div class="left-nav">
      <ul>
        <li v-for="(item,index) in list" :key="index" @click="changeActive(index)" :class="{active:item.path == $route.path}"> <span class="icon"></span>
          <router-link :to="item.path">{{item.name}}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import url from "@/api/base";
export default {
  data() {
    return {
      list: [
        {
          name: "我的收藏",
          path: "/mycollec"
        },
        {
          name: "阅读记录",
          path: "/myrecord"
        },
        {
          name: "消息中心",
          path: "/mymessage"
        },
        {
          name: "共享资源",
          path: "/myshare"
        }
      ],
      active: 0
    };
  },
  components: {},
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    }
  },
  created() {
    this.url = url.userPortrait;
  },
  methods: {
    // setUserInfo() {
    //   selectUserhead().then(res => {
    //     let userInfo = res.data.date;
    //     this.userInfo = userInfo;
    //     this.$store.commit("SET_USERINFO", userInfo);
    //   });
    // },
    loginOut() {
      this.$store.dispatch("resetVuex");
      // this.$store.commit("SET_LOGINTOKEN", 0);
      // this.$store.commit("SET_USER", "");
      // this.$store.commit("SET_USERINFO", "");
      // this.$store.commit("SET_ISNAVINDEX", "/");
      sessionStorage.setItem("userId","")
      sessionStorage.setItem("orgId","")
      sessionStorage.setItem("accId","")
      this.$router.replace("/");
    },
    changeActive(index) {
      this.active = index;
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz{
  .personal-left{
    background: #e93926;
  }
  .personal-left .left-nav ul li .icon{
    background: url("/static/images_dz/personal/icon.png") no-repeat;
  }
  .personal-left .left-nav ul li.active a{
    color: #e93926;
  }
}
.personal-left {
  user-select: none;
  background: #2dd0a5;
  height: calc(100% - 64px);
  width: 270px;
  border-radius: 10px;
  padding: 32px 0;
  .my-head {
    display: block;
    width: 114px;
    height: 114px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    img {
      width: 114px;
      height: 114px;
    }
  }
  .my-name {
    margin-top: 14px;
    display: block;
    text-align: center;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    img {
      // vertical-align: middle;
      margin-left: 14px;
    }
  }
  .left-nav {
    margin-top: 75px;
    ul {
      margin: 0px;
      padding: 0px;
      li {
        cursor: pointer;
        height: 60px;
        line-height: 60px;
        text-align: center;
        padding-left: 36px;
        font-size: 24px;
        color: #fff;
        display: flex;
        align-items: center;
        border-left: 4px solid transparent;
        a {
          text-decoration: none;
          color: #fff;
        }
        .icon {
          width: 40px;
          height: 40px;
          overflow: hidden;
          background: url("/static/images/personal/icon.png") no-repeat;
          margin-right: 30px;
        }
      }
      li:nth-child(2) {
        .icon {
          background-position-x: -40px;
        }
      }
      li:nth-child(3) {
        .icon {
          background-position-x: -80px;
        }
      }
      li:nth-child(4) {
        .icon {
          background-position-x: -120px;
        }
      }
      li.active {
        border-left: 4px solid #a5cc48;
        background: #eefff8;
        a {
          color: #15c798;
        }
        .icon {
          background-position-y: -40px;
        }
      }
    }
  }
}
</style>


